<template>
  <div class="head">
    <div class="head-left">
      <!-- 展开收缩按钮 -->
      <el-button
        @click="handleMenu"
        plain
        icon="el-icon-menu"
        size="mini"
      ></el-button>

      <!-- 面包屑 -->
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(v, i) in breadCrumbList"
          :to="v.path"
          :key="i"
        >
          {{ v.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>
    <div class="head-right">
      <!-- 下拉菜单 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="suggestion">意见反馈</el-dropdown-item> -->
          <!-- 对话框提交表单 -->
          <el-dialog
            title="意见反馈"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
          >
            <el-form label-position="top" label-width="80px" :model="form">
              <el-form-item label="请填写你的反馈建议">
                <el-input v-model="form.suggestion"></el-input>
              </el-form-item>
              <el-form-item label="提供问题截图">
                <el-input v-model="form.sug_img"></el-input>
                <!-- 上传图片 -->
                <!-- <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <el-button size="small" type="form.primary"
                    >点击上传</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload> -->
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <el-dropdown-item command="pim">个人信息</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //面包屑
      breadList: [],
      //意见反馈中的对话框的数据
      dialogVisible: false,
      form: {
        suggestion: "",
        sug_img: "",
        phone: "",
        fileList: [],
      },
      username:''
    };
  },
  watch: {
    $route() {
      //监听$route
      // this.getBreadcrumb();
    },
  },
  computed: {
    breadCrumbList() {
      return this.$route.matched;
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
  methods: {
    // 对话框是否关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleMenu() {
      this.$store.commit("collapseMenu");
    },
    logout(){
      window.sessionStorage.clear();//清除session
      window.localStorage.clear();
      this.$router.push("/login");
    },
    //下拉菜单触发事件，菜单项 key 进行不同的操作
    handleCommand(command) {
        if(command=='logout'){
          console.log("点击了退出");
          window.localStorage.clear();
          window.sessionStorage.clear();//清除session
          this.$router.push("/login");
        }else if(command=='suggestion'){
          this.dialogVisible = true
          console.log("点击了意见反馈")
        }else if(command=='pim'){
          //跳转到个人信息管理
          this.$router.push("/pim")
        }
      }
  },
  mounted() {
    window.addEventListener('setItemEvent',function(e){
      const newdata = JSON.parse(e.newValue)
      if(newdata.avatar_url){
        this.username = newdata.nickname
      }
    })
    setTimeout(()=>{
      this.username = JSON.parse(window.localStorage.getItem('user_info')).nickname
    },500)
  },
};
</script>

<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  // .head-left {
  //   position: relative;
  //   margin-top: 0.2rem;
  //   .el-button {
  //     position:absolute;
  //     top:-5px;
  //     left:10px;
  //   }
  //   .el-button--mini,.el-button--mini.is-round {
  //     padding: 5px 10px;
  //   }
  // }
}
.el-dropdown-link {
  cursor: pointer;
  color: #333;
  margin-right: 10px;
}
.el-icon-arrow-down {
  font-size: 0.15rem;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: white;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: white;
}
</style>